<template>
    <div>
        <h1>表格组件</h1>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="(item, index) in tableHead" :key="item.prop" :prop="item.prop" :label="item.label"
                :width="item.width">


                <!-- 为第一列添加点击事件 -->
                <template #default="scope" v-if="item.prop === 'name'">
                    <div @click="handleCellClick(scope.row, scope)" style="cursor: pointer; color: #409EFF;">
                        {{ scope.row[item.prop] }}
                    </div>
                </template>
            </el-table-column>

            <slot name="buttons"></slot>
            <slot name="num"></slot>

        </el-table>

        <!-- 添加 buttons 插槽，用于显示父组件传递的按钮 -->


    </div>
</template>

<script setup>
defineProps({
    tableHead: {
        type: Array,
        default: () => []
    },
    tableData: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['clickFirst']);
// 处理第一列点击事件
const handleCellClick = (row) => {
    // 触发自定义事件，将行数据和列属性传递给父组件emit('clickFirst', row)
    console.log(row, '-------------子组件的row-------------')
    emit('clickFirst', row);
}

</script>

<style scoped>
/* 这里可以编写组件样式 */
</style>
